<template>
  <view class="highlight-view" :class="{ primary: usePrimaryColor }">
    <view class="header">
      <view class="title">
        <text class="title-inner">
          <slot name="title"></slot>
          <text v-if="title">{{ title }}</text>
        </text>
        <view class="title-icon">
          <slot name="title-icon"></slot>
        </view>
        <slot name="title-remark"></slot>
        <text v-if="titleRemark" class="title-remark">{{ titleRemark }}</text>
      </view>
    </view>
    <view class="body">
      <view v-if="desc || $slots.desc" class="desc">
        <slot name="desc"></slot>
        <text>{{ desc }}</text>
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  title?: string
  titleRemark?: string
  desc?: string
  usePrimaryColor?: boolean
}>()
</script>

<style scoped lang="less">
@paddingVertical: 24rpx;
@paddingHorizontal: 32rpx;
.highlight-view {
  display: flex;
  flex-flow: column nowrap;
  max-height: 100%;
  overflow: hidden;
  padding-top: @paddingVertical;
  box-sizing: border-box;
  &.primary .header,
  &.primary .desc {
    color: var(--primary-color);
  }
  > .header,
  > .body {
    padding: 0 @paddingHorizontal;
  }
  > .header {
    margin-bottom: 8rpx;
    color: var(--dark-color);
    flex-shrink: 0;
    + .body {
      padding-top: 0;
    }
  }
  > .body {
    overflow: auto;
    flex: 1;
    color: var(--dark-color);
    padding-bottom: @paddingVertical;
  }

  .title {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 64rpx;
    line-height: 90rpx;
  }
  .title-remark {
    font-weight: 600;
    font-size: 48rpx;
    line-height: 68rpx;
  }
  .title-inner {
    margin-right: 24rpx;
  }
  .title-icon {
    margin-left: -12rpx;
  }
  .desc {
    font-weight: 400;
    font-size: 28rpx;
    line-height: 40rpx;
    margin-bottom: 24rpx;
    :deep(> view) {
      display: flex;
      flex-wrap: wrap;
    }
    :deep(> view > text) {
      white-space: nowrap;
      word-break: keep-all;
      margin-right: 24rpx;
    }
  }
}
</style>
